<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=none">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <button id="getImage">获取本地图片</button>


    <button id="seeImage">浏览本地图片</button>
    
    <button>点击分享：点击微信上面的三点</button>

    <img src="" id="img" />

    <!-- 微信官方的JSSDK库文件 -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <!-- vconsole工具 -->
    <script src="./js/vconsole.min.js"></script>
    <!-- 蓝景微信配置工具 -->
    <script src="./js/bj_wechat.js"></script>

    <script>
        // 本地缓存的图片id
        var localIds;

        /**
            1. 申请公众号、设置安全域名
            2. 引入JSSDK文件
        
            前端需要JSSDK配置--->自己服务器拿验证---->到微信服务器拿签名、随机字符串等
                            <---               <----     
        
            cnpm install demo_bluej_wx
        
            3. 使用wx.config配置页面的微信api功能，前提条件是在自己服务器拿到必填的数据
        
        */
        // 3.1 请求初始化JSSDK需要的数据     异步！！
        Utils.get(API.GET_JSSDK, {}, function (res) {
            // 将JSON字符串转化成对象
            res = JSON.parse(res);
            console.log(res);

            // 3.2 初始化JSSDK配置     异步！！
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature,// 必填，签名，见附录1
                jsApiList: [
                    "chooseImage",
                    "getLocalImgData",
                    "onMenuShareAppMessage",
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            // 3.3  config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.ready(function () {
                // 地址：c14.bluej.cn/你的目录/****.html

                let url = location.href;
                
                wx.onMenuShareAppMessage({
                    title: '震惊！', // 分享标题
                    desc: '妙龄少女竟然被八个壮汉轮流布置作业', // 分享描述
                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'http://c14.bluej.cn/ken/wechat-jssdk/img/car.png', // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        alert("分享成功");
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        alert("取消干嘛");
                    }
                });



                // 获取本地图片
                document.getElementById("getImage").addEventListener("click", function () {

                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            console.log(res);
                            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        }
                    });

                })

                // 浏览本地图片
                document.getElementById("seeImage").addEventListener("click", function () {

                    wx.getLocalImgData({
                        localId: localIds[0],
                        success: function (res) {
                            console.log(res);
                            // 读取图片资源的base64数据，可直接赋给img标签的src属性上
                            document.querySelector("#img").src = res.localData;
                        }
                    })


                })



            });
        })


    </script>


</body>

</html>